<template>
	<view class="qaresult_pages" v-if="isShowPage">
		<image class="qaresult_bk_img" :src="onlinePic+'answer/qaresult_bk.png'" mode="widthFix"></image>
		<view class="qaresult_box">
			<image class="season_bk_img" :src="onlinePic+'answer/season_bk.png'" mode="widthFix"></image>
			<view class="qa_rule" @click="showRule">规则</view>
			<view class="ml-10 text-c" style="margin-top: 72rpx;">
				<view class="f-18 c-white">{{resultinfo.result_title}}</view>
				<view class="f-14 c-white mt-5">{{resultinfo.result_desc}}</view>
			</view>
			<view class="qaresult_block_box">
				<view class="qaresult_userinfo">
					<view>
						<view v-if="userinfo.avatar_border" class="qaresult_user_avatar_box">
							<image class="avater_img"
								:src="userinfo.wx_avatar?picUrl+userinfo.wx_avatar:onlinePic+'avatar.png'"></image>
							<image class="qaresult_avatar_border" :src="picUrl+userinfo.avatar_border"></image>
						</view>
						<view v-else class="qaresult_user_avatar_boxd">
							<image class="avater_imgd"
								:src="userinfo.wx_avatar?picUrl+userinfo.wx_avatar:onlinePic+'avatar.png'"></image>
						</view>
						<view class="f-15 c-666666 mt-5 text-c ellipsis">{{userinfo.username}}</view>
					</view>
				</view>
				<view class="qaresult_text_box" v-if="resultinfo.top">
					<rich-text :nodes="resultinfo.top"></rich-text>
				</view>
				<view class="prize_box" @click="showPrize">
					<image class="prize_img" :src="resultinfo.prize.pic" mode="widthFix"></image>
					<view class="prize_check_text">{{resultinfo.prize.button}}</view>
				</view>
			</view>
			<view class="mt-20" v-if="resultinfo.button.length>0">
				<view class="group_public_btn_block"
					@click="tapButton(resultinfo.button[0].url,resultinfo.button[0].name)">
					{{resultinfo.button[0].name}}
				</view>
				<view class="mt-10" v-if="resultinfo.button">
					<uni-row v-if="resultinfo.button.length==3" :gutter="25">
						<uni-col :span="12">
							<view class="group_public_btn_empty"
								@click="tapButton(resultinfo.button[1].url,resultinfo.button[1].name)">
								{{resultinfo.button[1].name}}
							</view>
						</uni-col>
						<uni-col :span="12">
							<view class="group_public_btn_empty"
								@click="tapButton(resultinfo.button[2].url,resultinfo.button[2].name)">
								{{resultinfo.button[2].name}}
							</view>
						</uni-col>
					</uni-row>
					<view v-if="resultinfo.button.length==2" class="group_public_btn_empty"
						@click="tapButton(resultinfo.button[1].url,resultinfo.button[1].name)">
						{{resultinfo.button[1].name}}
					</view>
				</view>
			</view>
		</view>
		<button class="qaresult_share_box" open-type="share">
			<image class="qaresult_share_icon" :src="onlinePic+'answer/share_icon.png'"></image>
		</button>
		<view class="bk_bottom"></view>
		<view v-if="isShowRule||isShowPrize||isShowAddress" class="mask_box" @click="closePopup"></view>
		<view v-if="isShowRule" class="rule_popup_box">
			<view class="rule_popup">
				<view class="rule_popup_title">规则说明</view>
				<view class="rule_popup_content_box">
					<view class="rule_popup_text">
						<text>{{info.desc}}</text>
					</view>
				</view>
				<view class="display_flex" style="justify-content: center;">
					<view class="rule_popup_btn" @click="closePopup">我知道了</view>
				</view>
			</view>
			<view class="rule_popup_close" @click="closePopup">
				<uni-icons type="close" color="#ffffff" size="40"></uni-icons>
			</view>
		</view>
		<view v-if="isShowAddress" class="address_popup_box">
			<view class="address_popup">
				<view class="address_popup_title">填写礼品邮寄信息</view>
				<view class="address_popup_content_box">
					<view class="address_input_cell">
						<view class="address_input_name">姓名</view>
						<view class="address_input_box">
							<input class="address_input" v-model="address_info.name" placeholder="请填写姓名" maxlength="8"
								placeholder-style="color: #999999;" />
						</view>
					</view>
					<view class="address_input_cell">
						<view class="address_input_name">手机号码</view>
						<view class="address_input_box">
							<input class="address_input" type="tel" v-model="address_info.mobile" placeholder="请填写手机号码"
								maxlength="11" placeholder-style="color: #999999;" />
						</view>
					</view>
					<view class="address_input_cell">
						<view class="address_input_name">省,市,区</view>
						<view class="address_input_box">
							<picker class="flex-1 text-l" @change="bindRegionChange" :value="region" mode='region'>
								<view v-if="region.length>0">{{region[0]}}，{{region[1]}}，{{region[2]}}</view>
								<view class="c-999999" v-else>请选择省市区</view>
							</picker>
						</view>
					</view>
					<view class="address_input_cell" style="align-items: flex-start;">
						<view class="address_input_name mt-10">详细地址</view>
						<view class="address_textarea_box">
							<textarea v-model="address_info.address" maxlength='500' placeholder="请填写详细的地址"
								:disable-default-padding="true" placeholder-style="color: #999999;" />
						</view>
					</view>
				</view>
				<view class="display_flex" style="justify-content: center;">
					<view class="address_popup_btn" @click="submitAddress">保存信息</view>
				</view>
			</view>
			<view class="address_popup_close" @click="closePopup">
				<uni-icons type="close" color="#ffffff" size="40"></uni-icons>
			</view>
		</view>
		<view v-if="isShowPrize" class="prize_popup_box">
			<view class="prize_popup">
				<view class="prize_popup_title">{{resultinfo.prize.popup_title}}</view>
				<view class="prize_popup_content">
					<view class="prize_img_box">
						<image class="prize_img" :src="resultinfo.prize.pic" mode="widthFix"></image>
					</view>
					<view class="f-16 text-c mt-10">{{resultinfo.prize.title}}</view>
					<view class="prize_popup_desc_box">
						<view class="c-00A0DC text-c">获取方式</view>
						<view class="c-999999 mt-10">
							<text>{{resultinfo.prize.popup_desc}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="prize_popup_close" @click="closePopup">
				<uni-icons type="close" color="#ffffff" size="40"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getQaInfo,
		getSeasonResult,
		addSeasonAddress
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				info: '', //答题详情
				resultinfo: {
					button: [],
				}, //结果详情
				address_info: {},
				channel: '',
				saeson: '',
				isShowRule: false,
				isShowPrize: false,
				isShowAddress: false,
				region: [],
				isSubmit: true,
				isShowPage: false,
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
				userinfo: uni.getStorageSync('userinfo'),
			};
		},
		onShow() {
			this.userinfo = uni.getStorageSync('userinfo')
			if (uni.getStorageSync('onload')) {
				this.getQaInfo()
				this.getSeasonResult()
				uni.removeStorage({
					key: 'onload',
				})
			}
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		},
		onLoad(options) {
			this.subject_id = options.subject_id
			this.channel = options.channel
			this.saeson = options.saeson
			if (uni.getStorageSync('access_token')) {
				this.getQaInfo()
				this.getSeasonResult()
			}
		},
		methods: {
			getQaInfo() {
				getQaInfo({
					channel: this.channel,
					subject_id: this.subject_id,
				}).then(res => {
					if (res.state == 1) {
						this.info = res.data
						uni.setNavigationBarTitle({
							title: res.data.top
						})
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			getSeasonResult() {
				getSeasonResult({
					channel: this.channel,
					subject_id: this.subject_id,
					saeson: this.saeson,
				}).then(res => {
					if (res.state == 1) {
						this.resultinfo = res.data.info
						this.address_info = res.data.info.address_info
						if (res.data.info.address_info.area_id) {
							this.region = [res.data.info.address_info.province_name, res.data.info.address_info
								.city_name, res.data.info.address_info.area_name
							]
						}
						this.isShowPage = true
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			tapButton(url, name) {
				if (url == '填写礼品邮寄信息') {
					this.isShowAddress = true
				} else if (url == '本赛季排行榜') {
					uni.navigateTo({
						url: url,
					})
				} else {
					uni.navigateTo({
						url: url,
					})
				}
			},

			showRule() {
				this.isShowRule = true
			},
			showPrize() {
				this.isShowPrize = true
			},
			closePopup() {
				this.isShowRule = false
				this.isShowPrize = false
				this.isShowAddress = false
			},
			bindRegionChange(e) {
				console.log(e)
				this.region = e.detail.value
				this.regioncode = e.detail.code
				this.address_info.province_id = e.detail.code[0]
				this.address_info.province_name = e.detail.value[0]
				this.address_info.city_id = e.detail.code[1]
				this.address_info.city_name = e.detail.value[1]
				this.address_info.area_id = e.detail.code[2]
				this.address_info.area_name = e.detail.value[2]
			},
			submitAddress() {
				if (this.address_info.name == '') {
					uni.showToast({
						title: '请填写姓名',
						mask: true,
						icon: 'none',
						duration: 1500
					})
					return false;
				}
				if (this.address_info.mobile == '') {
					uni.showToast({
						title: '请填写手机号码',
						mask: true,
						icon: 'none',
						duration: 1500
					})
					return false;
				} else if (!(/^1[3456789]\d{9}$/.test(this.address_info.mobile))) {
					uni.showToast({
						title: '请填写正确的手机号码',
						icon: 'none'
					})
					return false
				}

				if (this.address_info.area_id == '') {
					uni.showToast({
						title: '请选择省市区',
						mask: true,
						icon: 'none',
						duration: 1500
					})
					return false;
				}
				if (this.address_info.address == '') {
					uni.showToast({
						title: '请填写详细的地址',
						mask: true,
						icon: 'none',
						duration: 1500
					})
					return false;
				}

				if (this.isSubmit) {
					this.isSubmit = false
					addSeasonAddress(this.address_info).then(res => {
						if (res.state == 1) {
							this.isShowAddress = false
							this.getSeasonResult()
							this.isSubmit = true
						} else {
							this.isSubmit = true
							uni.showToast({
								title: res.error[0],
								mask: true,
								icon: 'none',
								duration: 1500
							})
						}
					})
				}
			}
		},
		onShareAppMessage(res) {
			app.getShareTask()
			return {
				title: this.info.title ? this.info.title : '答题',
				imageUrl: this.info.share_img ? this.info.share_img : '',
				path: '/pages/qa/qastart/qastart?subject_id=' + this.subject_id + '&channel=' + this.channel
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
	}

	.qaresult_pages {
		height: 100vh;
		position: relative;
		overflow: hidden;

		.qaresult_bk_img {
			width: 100%;
			vertical-align: middle;
		}

		.qaresult_honor_box {
			position: absolute;
			top: 66rpx;
			right: 57rpx;
			z-index: 3;

			.qaresult_honor_img {
				width: 272rpx;
				height: 305rpx;
				vertical-align: middle;
			}
		}

		.qaresult_box {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 2;
			padding: 30rpx 30rpx 80rpx 30rpx;
			overflow: auto;

			.season_bk_img {
				width: 100%;
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				z-index: 3;
			}

			.qa_rule {
				position: absolute;
				top: 30rpx;
				left: 30rpx;
				z-index: 4;
				color: #ffffff;
				font-size: 26rpx;
				text-decoration: underline;
			}

			.qaresult_block_box {
				margin-top: 100rpx;
				padding: 30rpx 30rpx 60rpx 30rpx;
				border-radius: 8rpx;
				background-color: #ffffff;

				.qaresult_userinfo {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: -80rpx;

					.qaresult_user_avatar_box {
						width: 100rpx;
						height: 100rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						border-radius: 100%;

						.avater_img {
							width: 85rpx;
							height: 85rpx;
							border-radius: 100%;
						}

						.qaresult_avatar_border {
							width: 100rpx;
							height: 100rpx;
							position: absolute;
							top: 0;
							right: 0;
							bottom: 0;
							left: 0;
							z-index: 1;
						}

						.avater_v_icon {
							width: 30rpx;
							height: 30rpx;
							position: absolute;
							right: 10rpx;
							bottom: 0;
							z-index: 1;
						}
					}

					.qaresult_user_avatar_boxd {
						width: 100rpx;
						height: 100rpx;
						border-radius: 100%;
						border: 4rpx solid #ffffff;

						.avater_imgd {
							width: 100rpx;
							height: 100rpx;
							border-radius: 100%;
						}
					}
				}

				.qaresult_progress_box {
					margin-top: 40rpx;

					.qaresult_progress {
						width: 100%;
						height: 20rpx;
						background: #F1F1F1;
						border-radius: 2rpx;
					}

					.qaresult_progress_on {
						width: 100%;
						height: 20rpx;
						border-radius: 2rpx;
						background-image: linear-gradient(to right, #00A0DC, #69D5FE);
					}
				}

				.qaresulr_status_text_ok {
					color: #00A0DC;
					font-size: 24rpx;
					display: inline-block;
					padding: 12rpx 15rpx;
					border-radius: 50rpx;
					border: 1rpx solid #00A0DC;
				}

				.qaresulr_status_text_no {
					color: #B6B6B6;
					font-size: 24rpx;
					display: inline-block;
					padding: 12rpx 15rpx;
					border-radius: 50rpx;
					border: 1rpx solid #B5B5B5;
				}

				.qaresult_text_box {
					color: #666666;
					font-size: 26rpx;
					line-height: 38rpx;
					margin-top: 30rpx;
				}

				.prize_box {
					margin: 50rpx 100rpx 0 100rpx;
					padding: 35rpx;
					border-radius: 8rpx;
					border: 1rpx solid #DFDFDF;

					.prize_img {
						width: 100%;
						vertical-align: middle;
					}

					.prize_check_text {
						color: #A9AAAA;
						font-size: 22rpx;
						margin-top: 24rpx;
						text-align: center;
						text-decoration: underline;
					}
				}
			}
		}

		.bk_bottom {
			height: 230rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 1;
			background-image: linear-gradient(to top, rgba(0, 160, 220, 0.2), #f1f1f1);
		}

		.qaresult_share_box {
			position: absolute;
			right: 15rpx;
			bottom: 300rpx;
			z-index: 3;

			.qaresult_share_icon {
				width: 102rpx;
				height: 102rpx;
				vertical-align: middle;
			}
		}

		button::after {
			border: none !important;
		}

		button {
			padding-left: 0 !important;
			padding-right: 0 !important;
			background-color: transparent !important;
		}
	}
</style>